<template>
  <div class="container">
     <div class="tip">  
        <p>重构实验成绩单：构建/重新构建一个班的实验成绩单</p>
        <p>请谨慎考虑是否重构实验成绩表，一经重构无法恢复</p>
     </div>
        <div class="select">
            <el-select
                v-model="selectdClassId"
                placeholder="所有班级"
                @change="findExperiment"
            >
                <el-option
                v-for="item in allClass"
                :key="item.id"
                :value="item.id"
                :label="item.className"
                ></el-option>
            </el-select>
            <!--el-popconfirm icon="el-icon-info" icon-color="red" title="确定刷新成绩单吗？" @confirm="() => refresh()">
              <el-button type="primary" class="btn" slot="reference" size="mini">刷新成绩单</el-button>
            </el-popconfirm-->
            <el-popconfirm icon="el-icon-info" icon-color="red" title="确定构建/重构成绩单吗？" @confirm="() => getTableData()">
              <el-button type="primary" class="btn" slot="reference" size="mini">构建/重构成绩单</el-button>
            </el-popconfirm>
            <!--el-button type="primary" size="mini" class="btn">重构/构建成绩单</el-button-->
        </div> 
         
        <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
    <el-table-column
        v-for="(item, index) of columnList2"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        
        fixed
      >
      </el-table-column>
      <template slot="empty">
        <span>暂无数据，请选择班级进行实验成绩单的操作~~~</span>
      </template>
      <el-table-column
        v-for="(item, index) of experimentList"
        :key="item.id"
        align="center"
        :label="item.name"
        :min-width="item.minWidth"
        fixed
      >
        <template v-slot="{ row }">
            {{ row.experimentScore[index].passNum }}
        </template>
      </el-table-column>
    </el-table>
    <!--el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination-->
  </div>
</template>

<script>
import { findByTeacherId } from "@/api/class";
import { rebuildExperimentScoreByteacherIdAndClassId,refreshExperimentScoreByteacherIdAndClassId  } from "@/api/viewResults";
import { columnList2 } from "./config/viewResultsForm";
export default {
  data() {
    return {
        //type:null,
        visible:false,
        tableLoading :false,
        selectdClassId: null,
        allClass: [],
        userInfo: {},
        tableData:[],
        experimentList: [],
        pageNum:1,
        pageSize:10,
        total:0,
        columnList2,
    } 
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    this.findClass();
  },
  methods: {
    findClass() {
      findByTeacherId({
        teacherId: this.userInfo.userId
      })
        .then(res => {
          console.log(res);
          this.allClass = res.data;
        })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    findExperiment() {
      this.allClass.forEach(item => {
        if (item.id === this.selectdClassId) {
          this.studentClass = item.className;
        }
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getTableData();
    },
    //  当前页码改变事件
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getTableData();
    },
    getTableData() {
      this.tableLoading = true;
        rebuildExperimentScoreByteacherIdAndClassId({
        teacherId: this.userInfo.userId,
        classId: this.selectdClassId,
        //pageNum: this.pageNum,
        //pageSize: this.pageSize
      })
        .then(res => {
          console.log(res);
          this.tableData = res.data;
          this.experimentList = res.data[0].experimentScore;
          this.total = res.total;
        })
        .catch(() => {
          this.$message.error("构建/重构实验成绩单失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
      
    },
    /*//刷新
    refresh() {
      //this.tableLoading = true;
      this.type = 0;
      console.log(this.type,"type");
      this.pageNum = 1;
      this.getTableData();
      
    },
    //重建
    rebuild() {
      //this.tableLoading = true;
      this.type = 1;
      this.pageNum = 1;
      this.getTableData();
    }*/
  }
}

</script>

<style lang="scss" scoped>
.container {
  position: relative;
}
.container .tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #5b8bff;
    margin: 20px 0;
}
.select {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-bottom: 15px;
  .el-select {
    height: 35px;
    margin-right: 20px;
  }
  /deep/ .el-input__inner {
    width: 280px;
    height: 35px;
    line-height: 35px;
    border-radius: 22px;
  }
  /deep/ .el-input__icon {
    line-height: 35px;
  }
  .el-icon-search {
    line-height: 35px;
    padding-left: 10px;
    color: #5b8bff;
    font-weight: bold;
  }
}
.btn {
    border-radius:20px;
    margin-left:10px;
}
/deep/ .el-table .el-table__fixed {
  height: auto !important;
  bottom: 0px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  opacity: 0;
  width: 0px;
  height: 0px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  width: 0px;
  height: 0px;
  background: #eee;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  width: 0px;
  height: 0px;
  // border-radius: 2px;
  // background: rgba(0, 0, 0, 0.4);
}


</style>